<template>
   <el-dialog
        :close-on-click-modal="false"
        :visible="isShowAddNumDialog"
        :title="title"
        width="550px"
        @close="$emit('close')"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="95px"
        >
          <el-form-item label="名称:" prop="name">
              <span> {{  info.name }}</span>
          </el-form-item>
          <el-form-item label="级别:" prop="grade">
            <span>{{  info.grade }}</span>
          </el-form-item>
          <div style="display: flex">
            <el-form-item label="规格:" prop="capacity">
              <span>{{  info.capacity }}</span>
              <span v-if="info.unit==1">  L</span>
              <span v-else-if="info.unit==2">  mL</span>
              <span v-else-if="info.unit==3">  g</span>
            </el-form-item>
          </div>
          <el-form-item label="数量:" prop="amount">
            <el-input
              min="0"
              type="number"
              v-model="form.amount"
              style="width: 350px"
              placeholder="请填入数量"
            />瓶
          </el-form-item>
          <el-form-item label="实验室" prop="labId">
            <el-select
              v-model="form.labId"
              style="width: 370px"
              clearable
              filterable
              placeholder="请选择实验室"
              @change="onChanged"
            >
              <el-option
                v-for="item in labs"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="试剂柜" prop="cabinetId">
            <el-select
              v-model="form.cabinetId"
              style="width: 370px"
              clearable
              filterable
              :remote-method="getCabinets"
              placeholder="请选择试剂柜"
            >
              <el-option
                v-for="item in cabinets"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="实验室:" prop="labId">
            <span>{{  info.labName }}</span>
          </el-form-item>
          <el-form-item label="试剂柜:" prop="cabinetId">
            <span>{{  info.cabinetName }}</span>
          </el-form-item> -->
          <el-form-item label="危险等级:" prop="dangerClasses">
            <el-tag type="success" v-if="info.dangerClasses == 1"
              >一般试剂(I)</el-tag
            >
            <el-tag v-if="info.dangerClasses == 2">有机试剂(II)</el-tag>
            <el-tag type="danger" v-if="info.dangerClasses == 3"
              >剧毒试剂/易致毒试剂(III)</el-tag>
          </el-form-item>
          <el-form-item
            label="是否审批:"
            prop="isAudit"
          >
            <span>{{ info.isAudit == 0 ? "否" : "是" }}</span>
          </el-form-item>
          <el-form-item label="有效期" prop="expirationDate">
            <el-date-picker
              style="width: 370px"
              v-model="form.expirationDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择有效期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="有效期:" prop="expirationDate">
            <span>{{ info.expirationDate || '无'}}</span>
          </el-form-item> -->
          <el-form-item label="备注:">
           <span>{{ info.note || '无'}}</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="$emit('close')">取消</el-button>
          <el-button
            type="primary"
            @click="addNum"
            >确认</el-button
          >
        </div>
   </el-dialog>
</template>

<script>
import { getCabinet} from "@/api/cabinet";
import { warehousingAPI,getLabCabinetListAPI } from '@/api/hazardousChemicals'
export default {
  props:{
    info:{
      type:Object,
      default: {}
    },
    isShowAddNumDialog:{
      type:Boolean,
      default:false
    }
  },
  data () {
    let limtAmount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("数量不能为空"));
      } else if (!(parseInt(value) === parseFloat(value))) {
        return callback(new Error("数量只能为整数"));
      }
      callback();
    };
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      form:{
        amount:'',
        expirationDate: this.info.expirationDate,
        cabinetId: this.info.cabinetId,
        labId: this.info.labId,
      },
      rules:{
        amount: [{ required: true, trigger: "blur", validator: limtAmount }],
        labId: [  { required: true, message: "实验室不能为空", trigger: "change" },],
        cabinetId: [  { required: true, message: "试剂柜不能为空", trigger: "change" }, ],
      },
      title: this.info.name + '- 入库',
      labs: [],
      cabinets: [],
    }
  },

  created () {
    this.getLabCabinetList();
    this.getCabinets()
  },

  methods: {
    addNum(){
      this.$refs.form.validate(async (valid)=>{
       if(!valid) return
       try {
         await warehousingAPI({
        id: this.info.id,
        amount: this.form.amount,
        expirationDate: this.form.expirationDate,
        cabinetId: this.form.cabinetId,
        labId: this.form.labId,
      })
      this.$message.success('入库成功')
       } catch (error) {
        this.$message.error('入库失败')
       }finally{
        this.$emit('close')
        this.$emit('refresh')
       }
      })

    },
    async getLabCabinetList() {
      const res = await getLabCabinetListAPI();
      this.labs = res;
    },
    async getCabinets() {
      const res = await getCabinet()
      this.cabinets = res.content;
    },
    onChanged(value) {
      getCabinet()
        .then((response) => {
          this.cabinets = response.content;
          this.cabinets = this.cabinets.filter((item) => {
            return item.labId == value;
          });
          if (this.cabinets.length != 0) {
            this.form.cabinetId = this.cabinets[0].id;
          } else {
            this.form.cabinetId = null;
          }
        })
        .catch((_) => {
          console.log(response);
        });
    },
  }
}
</script>

<style scoped>

</style>
